<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<meta name="description" content="">
	<meta name="author" content="">
	<!--<link rel="icon" href="../../favicon.ico">-->

	<title>Showcase - FooTable</title>

	<!-- Bootstrap core CSS -->
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">

	<!-- Prism -->
	<link href="../../css/prism.css" rel="stylesheet">

	<!-- FooTable Bootstrap CSS -->
	<link href="../../../compiled/footable.bootstrap.min.css" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="../../css/docs.css" rel="stylesheet">

	<script src="../../js/demo-rows.js"></script>
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<body class="docs">

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="../../../index.html" class="navbar-brand">FooTable</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li><a href="../../getting-started.html">Getting started</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Components <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="../../components/editing.html">Editing</a></li>
						<li><a href="../../components/filtering.html">Filtering</a></li>
						<li><a href="../../components/paging.html">Paging</a></li>
						<li><a href="../../components/sorting.html">Sorting</a></li>
						<li><a href="../../components/state.html">State</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="../../jsdocs/index.html" target="_blank">JSDocs</a></li>
				<li><a href="https://github.com/fooplugins/FooTable" target="_blank">GitHub</a></li>
			</ul>
		</div><!--/.nav-collapse -->
	</div>
</nav>
<!-- Header -->
<div class="jumbotron">

	<div class="container">
		<h1>Showcase</h1>
		<h2>How to create a table that makes use of all the components.</h2>
	</div>

</div>
<!-- Content -->
<div class="container">
	<div class="docs-section">

		<div class="callout callout-info">
			<h4>Notes</h4>
			<ul>
				<li>
					We make use of two static files (<a href="../../content/columns.json" target="_blank">columns.json</a> and <a href="../../content/rows.json" target="_blank">rows.json</a>)
					to supply the below examples data.
				</li>
				<li>
					The below example loads ten thousand (10000) rows from the server.
				</li>
				<li>
					Using the <a href="../../components/paging.html">paging component</a> drastically improves the performance of the plugin on large numbers of rows.
				</li>
				<li>
					The <a href="../../components/editing.html">editing component</a> requires you to create the modal and editor form that is displayed. Check out the individual component documentation or example for more details.
				</li>
				<li>
					As the <a href="../../components/state.html">state component</a> has no UI try sorting a column, changing the page or applying a search filter and then refreshing the browser.
				</li>
			</ul>
		</div>

		<p>
			To create a table using multiple components simply enable those you want to use and set any specific options for them. The below example uses ajax to load the column and row data
			and enables the filtering, paging, sorting, editing and state components simultaneously.
		</p>

		<div class="example">
			<table id="showcase-example-1" class="table" data-paging="true" data-filtering="true" data-sorting="true" data-editing="true" data-state="true"></table>

			<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
				<style scoped>
					/* provides a red astrix to denote required fields - this should be included in common stylesheet */
					.form-group.required .control-label:after {
						content:"*";
						color:red;
						margin-left: 4px;
					}
				</style>
				<div class="modal-dialog" role="document">
					<form class="modal-content form-horizontal" id="editor">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
							<h4 class="modal-title" id="editor-title">Add Row</h4>
						</div>
						<div class="modal-body">
							<input type="number" id="id" name="id" class="hidden"/>
							<div class="form-group required">
								<label for="firstName" class="col-sm-3 control-label">First Name</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
								</div>
							</div>
							<div class="form-group required">
								<label for="lastName" class="col-sm-3 control-label">Last Name</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
								</div>
							</div>
							<div class="form-group">
								<label for="jobTitle" class="col-sm-3 control-label">Job Title</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="jobTitle" name="jobTitle" placeholder="Job Title">
								</div>
							</div>
							<div class="form-group required">
								<label for="startedOn" class="col-sm-3 control-label">Started On</label>
								<div class="col-sm-9">
									<input type="date" class="form-control" id="startedOn" name="startedOn" placeholder="Started On" required>
								</div>
							</div>
							<div class="form-group">
								<label for="dob" class="col-sm-3 control-label">Date of Birth</label>
								<div class="col-sm-9">
									<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
								</div>
							</div>
							<div class="form-group">
								<label for="status" class="col-sm-3 control-label">Status</label>
								<div class="col-sm-9">
									<select class="form-control" id="status" name="status">
										<option value="Active">Active</option>
										<option value="Disabled">Disabled</option>
										<option value="Suspended">Suspended</option>
									</select>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary">Save changes</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						</div>
					</form>
				</div>
			</div>

		</div>
		<pre class="language-markup" data-lang="markup"><code>&lt;!-- Table Markup --&gt;
&lt;table id=&quot;showcase-example-1&quot; class=&quot;table&quot; data-paging=&quot;true&quot; data-filtering=&quot;true&quot; data-sorting=&quot;true&quot; data-editing=&quot;true&quot; data-state=&quot;true&quot;&gt;&lt;/table&gt;

&lt;!-- Editing Modal Markup --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;editor-modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;editor-title&quot;&gt;
	&lt;style scoped&gt;
		/* provides a red astrix to denote required fields - this should be included in common stylesheet */
		.form-group.required .control-label:after {
			content:&quot;*&quot;;
			color:red;
			margin-left: 4px;
		}
	&lt;/style&gt;
	&lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
		&lt;form class=&quot;modal-content form-horizontal&quot; id=&quot;editor&quot;&gt;
			&lt;div class=&quot;modal-header&quot;&gt;
				&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;&lt;/button&gt;
				&lt;h4 class=&quot;modal-title&quot; id=&quot;editor-title&quot;&gt;Add Row&lt;/h4&gt;
			&lt;/div&gt;
			&lt;div class=&quot;modal-body&quot;&gt;
				&lt;input type=&quot;number&quot; id=&quot;id&quot; name=&quot;id&quot; class=&quot;hidden&quot;/&gt;
				&lt;div class=&quot;form-group required&quot;&gt;
					&lt;label for=&quot;firstName&quot; class=&quot;col-sm-3 control-label&quot;&gt;First Name&lt;/label&gt;
					&lt;div class=&quot;col-sm-9&quot;&gt;
						&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;firstName&quot; name=&quot;firstName&quot; placeholder=&quot;First Name&quot; required&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class=&quot;form-group required&quot;&gt;
					&lt;label for=&quot;lastName&quot; class=&quot;col-sm-3 control-label&quot;&gt;Last Name&lt;/label&gt;
					&lt;div class=&quot;col-sm-9&quot;&gt;
						&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;lastName&quot; name=&quot;lastName&quot; placeholder=&quot;Last Name&quot; required&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class=&quot;form-group&quot;&gt;
					&lt;label for=&quot;jobTitle&quot; class=&quot;col-sm-3 control-label&quot;&gt;Job Title&lt;/label&gt;
					&lt;div class=&quot;col-sm-9&quot;&gt;
						&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;jobTitle&quot; name=&quot;jobTitle&quot; placeholder=&quot;Job Title&quot;&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class=&quot;form-group required&quot;&gt;
					&lt;label for=&quot;startedOn&quot; class=&quot;col-sm-3 control-label&quot;&gt;Started On&lt;/label&gt;
					&lt;div class=&quot;col-sm-9&quot;&gt;
						&lt;input type=&quot;date&quot; class=&quot;form-control&quot; id=&quot;startedOn&quot; name=&quot;startedOn&quot; placeholder=&quot;Started On&quot; required&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class=&quot;form-group&quot;&gt;
					&lt;label for=&quot;dob&quot; class=&quot;col-sm-3 control-label&quot;&gt;Date of Birth&lt;/label&gt;
					&lt;div class=&quot;col-sm-9&quot;&gt;
						&lt;input type=&quot;date&quot; class=&quot;form-control&quot; id=&quot;dob&quot; name=&quot;dob&quot; placeholder=&quot;Date of Birth&quot;&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class=&quot;form-group&quot;&gt;
					&lt;label for=&quot;status&quot; class=&quot;col-sm-3 control-label&quot;&gt;Status&lt;/label&gt;
					&lt;div class=&quot;col-sm-9&quot;&gt;
						&lt;select class=&quot;form-control&quot; id=&quot;status&quot; name=&quot;status&quot;&gt;
							&lt;option value=&quot;Active&quot;&gt;Active&lt;/option&gt;
							&lt;option value=&quot;Disabled&quot;&gt;Disabled&lt;/option&gt;
							&lt;option value=&quot;Suspended&quot;&gt;Suspended&lt;/option&gt;
						&lt;/select&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class=&quot;modal-footer&quot;&gt;
				&lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
				&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
			&lt;/div&gt;
		&lt;/form&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		<pre class="language-javascript between" data-lang="javascript"><code>jQuery(function($){
	var $modal = $(&#39;#editor-modal&#39;),
		$editor = $(&#39;#editor&#39;),
		$editorTitle = $(&#39;#editor-title&#39;),
		ft = FooTable.init(&#39;#showcase-example-1&#39;, {
			columns: $.get(&quot;../../content/columns.json&quot;),
			rows: $.get(&quot;../../content/rows.json&quot;),
			editing: {
				addRow: function(){
					$modal.removeData(&#39;row&#39;);
					$editor[0].reset();
					$editorTitle.text(&#39;Add a new row&#39;);
					$modal.modal(&#39;show&#39;);
				},
				editRow: function(row){
					var values = row.val();
					$editor.find(&#39;#id&#39;).val(values.id);
					$editor.find(&#39;#firstName&#39;).val(values.firstName);
					$editor.find(&#39;#lastName&#39;).val(values.lastName);
					$editor.find(&#39;#jobTitle&#39;).val(values.jobTitle);
					$editor.find(&#39;#status&#39;).val(values.status);
					$editor.find(&#39;#startedOn&#39;).val(values.started.format(&#39;YYYY-MM-DD&#39;));
					$editor.find(&#39;#dob&#39;).val(values.dob.format(&#39;YYYY-MM-DD&#39;));
					$modal.data(&#39;row&#39;, row);
					$editorTitle.text(&#39;Edit row #&#39; + values.id);
					$modal.modal(&#39;show&#39;);
				},
				deleteRow: function(row){
					if (confirm(&#39;Are you sure you want to delete the row?&#39;)){
						row.delete();
					}
				}
			}
		}),
		uid = 10001;

	$editor.on(&#39;submit&#39;, function(e){
		if (this.checkValidity &amp;&amp; !this.checkValidity()) return;
		e.preventDefault();
		var row = $modal.data(&#39;row&#39;),
			values = {
				id: $editor.find(&#39;#id&#39;).val(),
				firstName: $editor.find(&#39;#firstName&#39;).val(),
				lastName: $editor.find(&#39;#lastName&#39;).val(),
				jobTitle: $editor.find(&#39;#jobTitle&#39;).val(),
				started: moment($editor.find(&#39;#startedOn&#39;).val(), &#39;YYYY-MM-DD&#39;),
				dob: moment($editor.find(&#39;#dob&#39;).val(), &#39;YYYY-MM-DD&#39;),
				status: $editor.find(&#39;#status option:selected&#39;).val()
			};

		if (row instanceof FooTable.Row){
			row.val(values);
		} else {
			values.id = uid++;
			ft.rows.add(values);
		}
		$modal.modal(&#39;hide&#39;);
	});
});</code></pre>

	</div>

</div> <!-- /container -->

<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../../js/prism.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../js/ie10-viewport-bug-workaround.js"></script>
<!-- Add in any FooTable dependencies we may need -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<!-- Add in FooTable itself -->
<script src="../../../compiled/footable.js"></script>
<!-- Initialize FooTable -->
<script>
jQuery(function($){
	var $modal = $('#editor-modal'),
		$editor = $('#editor'),
		$editorTitle = $('#editor-title'),
		ft = FooTable.init('#showcase-example-1', {
			columns: $.get("../../content/columns.json"),
			rows: $.get("../../content/rows.json"),
			editing: {
				addRow: function(){
					$modal.removeData('row');
					$editor[0].reset();
					$editorTitle.text('Add a new row');
					$modal.modal('show');
				},
				editRow: function(row){
					var values = row.val();
					$editor.find('#id').val(values.id);
					$editor.find('#firstName').val(values.firstName);
					$editor.find('#lastName').val(values.lastName);
					$editor.find('#jobTitle').val(values.jobTitle);
					$editor.find('#status').val(values.status);
					$editor.find('#startedOn').val(values.started.format('YYYY-MM-DD'));
					$editor.find('#dob').val(values.dob.format('YYYY-MM-DD'));
					$modal.data('row', row);
					$editorTitle.text('Edit row #' + values.id);
					$modal.modal('show');
				},
				deleteRow: function(row){
					if (confirm('Are you sure you want to delete the row?')){
						row.delete();
					}
				}
			}
		}),
		uid = 10001;

	$editor.on('submit', function(e){
		if (this.checkValidity && !this.checkValidity()) return;
		e.preventDefault();
		var row = $modal.data('row'),
			values = {
				id: $editor.find('#id').val(),
				firstName: $editor.find('#firstName').val(),
				lastName: $editor.find('#lastName').val(),
				jobTitle: $editor.find('#jobTitle').val(),
				started: moment($editor.find('#startedOn').val(), 'YYYY-MM-DD'),
				dob: moment($editor.find('#dob').val(), 'YYYY-MM-DD'),
				status: $editor.find('#status option:selected').val()
			};

		if (row instanceof FooTable.Row){
			row.val(values);
		} else {
			values.id = uid++;
			ft.rows.add(values);
		}
		$modal.modal('hide');
	});
});
</script>
</body>
</html>